<template>
  <div>
    <div class="card mb-3 r-form">
      <div class="card-body">
        <div class="font-weight-bold mb-3">基本信息：</div>
        <template v-if="isAddEdit">
          <div class="d-flex mb-2">
            <label class="col-form-label r-form-label">项目名称</label>
            <div class="flex-1">
              <select-self-customer
                v-model="relatedId"
                :is-finish-project="false"
                :empty-text="riskType === 1 ? '没有需要展期的项目' : '没有需要续贷的项目'"
                @change="handleCustomerSelect"
              ></select-self-customer>
            </div>
            <label class="col-form-label r-form-label">地址</label>
            <div class="flex-1">
              <el-input v-model="related.address" disabled></el-input>
            </div>
          </div>
          <div class="d-flex mb-2">
            <label class="col-form-label r-form-label">联系人</label>
            <div class="flex-1">
              <el-input v-model="related.corp_name" disabled></el-input>
            </div>
            <label class="col-form-label r-form-label">联系电话</label>
            <div class="flex-1">
              <el-input v-model="related.mobile_no" disabled></el-input>
            </div>
          </div>
          <div class="d-flex">
            <label class="col-form-label r-form-label">在保余额</label>
            <div class="flex-1">
              <el-input v-model="related.left_funds" disabled>
                <template slot="append">万元</template>
              </el-input>
            </div>
            <label class="col-form-label r-form-label">到期时间</label>
            <div class="flex-1">
              <el-input v-model="related.load_end_date" disabled></el-input>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="d-flex mb-2">
            <label class="col-form-label r-form-label">项目名称</label>
            <div class="flex-1 input-static">{{ renewalData.customer_name }}</div>
            <label class="col-form-label r-form-label">地址</label>
            <div class="flex-1 input-static">{{ renewalData.address }}</div>
          </div>
          <div class="d-flex mb-2">
            <label class="col-form-label r-form-label">联系人</label>
            <div class="flex-1 input-static">{{ renewalData.corp_name }}</div>
            <label class="col-form-label r-form-label">联系电话</label>
            <div class="flex-1 input-static">{{ renewalData.mobile_no }}</div>
          </div>
          <div class="d-flex mb-2">
            <label class="col-form-label r-form-label">在保余额</label>
            <div class="flex-1 input-static">{{ renewalData.left_funds }}万元</div>
            <label class="col-form-label r-form-label">到期时间</label>
            <div class="flex-1 input-static">{{ renewalData.load_end_date }}</div>
          </div>
          <div class="d-flex mb-2" v-if="viewMode === 2">
            <label class="col-form-label r-form-label">情况说明</label>
            <div class="flex-1 input-static">{{ renewalData.des }}</div>
            <label class="col-form-label r-form-label">附件上传</label>
            <div class="flex-1 input-image">
              <img-card :images="attachList" style="margin: 0 -15px"></img-card>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'

import ImgCard from '@/components/ImgCard'
import SelectSelfCustomer from '@/credit/views/city/risk/SelectSelfCustomer'

export default {
  components: {
    SelectSelfCustomer,
    ImgCard,
  },
  props: {
    renewalData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: {
      type: Number,
      default: 0,
    },
    riskType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      relatedId: '',
      related: {},
    }
  },
  computed: {
    isAddEdit() {
      return !this.renewalData.credit_extended_loan_id
    },
    attachList() {
      return arrayFromString(this.renewalData.attachment)
    },
  },
  watch: {
    renewalData: {
      handler: function () {
        this.relatedId = ''
        this.related = {}
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleCustomerSelect(val, row) {
      this.related = row
      this.$emit('change', val, row)
    },
  },
}
</script>

<style lang="scss" scoped>
.r-form {
  /deep/ .el-input.is-disabled .el-input__inner,
  /deep/ .el-textarea.is-disabled .el-textarea__inner {
    color: $gray-600;
  }
  &-label {
    width: 110px;
    text-align: right;
    margin-right: 0.5rem;
  }
}
.input-static {
  border-radius: 4px;
  border: 1px solid $border-color;
  padding: 6px 15px;
  min-height: 36px;
  background-color: #f5f7fa;
  color: $gray-600;
  cursor: not-allowed;
}
.input-image {
  padding: 0 15px;
}
</style>
